<template>
  <div class="chart-preview" v-if="show">
    <div class="chart-preview-header">
      图表预览
    </div>
    <div class="chart-preview-close" @click="close">
      <svg
        t="1736839278629"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4263"
        width="30"
        height="30"
      >
        <path
          d="M512 0C229.272524 0 0 229.272524 0 512s229.272524 512 512 512 512-229.272524 512-512S794.727476 0 512 0z m241.359982 701.667784a36.571429 36.571429 0 1 1-51.71509 51.715091L512 563.715091 322.355108 753.359982a36.571429 36.571429 0 1 1-51.71509-51.71509L460.284909 512 270.640018 322.355108a36.571429 36.571429 0 0 1 51.71509-51.71509L512 460.284909l189.644892-189.644891a36.571429 36.571429 0 0 1 51.71509 51.71509L563.715091 512z"
          p-id="4264"
        ></path>
      </svg>
    </div>
    <div class="chart-preview-content">
      <component :is="component" />
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, markRaw } from 'vue'
const data = reactive({
  show: false,
  component: null
})


const open = (component) => {
  data.show = true
  data.component = markRaw(component)
}

const close = () => {
  data.show = false
}

defineExpose({ open });

const { show, component } = toRefs(data)
</script>

<style scoped lang="less">
.chart-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  height: 800px;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.chart-preview-header {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  padding: 0 16px;
}


.chart-preview-close {
  position: absolute;
  top: 5px;
  right: 16px;
  cursor: pointer;
  z-index: 1000;
  // .icon {
  //   fill: #fff;
  // }
}

.chart-preview-content {
  width: 100%;
  height: calc(100% - 40px);
  .chart {
    width: 100%;
    height: 100%;
    transform: scale(1);
  }
}
</style>

